<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <title>用户列表</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>用户列表</h1>
        <table border="1">
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>邮箱</th>
            </tr>
            <tr v-for="user in users" :key="user.id">
                <td>{{ user.id }}</td>
                <td>{{ user.username }}</td>
                <td>{{ user.email }}</td>
            </tr>
        </table>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                users: []
            },
            created() {
                this.fetchUsers();
            },
            methods: {
                fetchUsers() {
                    axios.get('http://localhost:8080/test/users')
                        .then(response => {
                            this.users = response.data.data;
                        })
                        .catch(error => {
                            console.error('Error fetching users: ', error);
                        });
                }
            }
        });
    </script>
</body>
</html>

